<template>
  <view class="publish-container">
    <!-- 封面图上传 -->
    <view class="cover-upload" @tap="uploadCover">
      <view class="upload-content" v-if="!formData.coverImage">
        <view class="upload-text-wrapper">
          <image class="camera-icon-top" style="width: 100%;height: 100%;margin: 0;"
            src="/static/icons/camera.jpg" mode="aspectFit"></image>
          <text class="upload-text">选择封面图</text>
        </view>
      </view>
      <view class="upload-mask" v-else>
        <image class="camera-icon-top" :src="formData.coverImage" style="width: 100%;height: 100%;margin: 0;"
          mode="aspectFit"></image>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 活动标题 -->
      <view class="form-item">
        <view class="form-label">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/title.png" />
            <text>活动标题</text>
          </view>
        </view>
        <input type="text" v-model="formData.title" placeholder="请输入活动标题" class="title-input" maxlength="50" />
      </view>

      <!-- 选择球队 -->
      <view class="form-item" @tap="openTeamSelector">
        <view class="form-label with-arrow">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/team.png" />
            <text>选择球队</text>
          </view>
          <text class="selected-team" v-if="formData.team">{{ formData.team.name }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 活动时间 -->
      <view class="form-item" @tap="openDateTimeSelector">
        <view class="form-label with-arrow">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/calendar.png" />
            <text>活动时间</text>
          </view>
          <text class="selected-time" v-if="formData.datetime">
            {{ formData.datetime.label }} {{ formData.datetime.time }}
          </text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 编辑地理位置 -->
      <view class="form-item" @tap="openLocationSelector">
        <view class="form-label with-arrow">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/location.png" />
            <text>活动地点</text>
          </view>
          <text class="selected-location" v-if="formData.location">{{ formData.location.name }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 活动种类 -->
      <view class="form-item" @tap="openSportTypeSelector">
        <view class="form-label with-arrow">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/category.png" />
            <text>活动种类</text>
          </view>
          <text class="selected-type" v-if="formData.sportType">{{ formData.sportType.dictLabel }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 活动公告 -->
      <view class="form-item notice-item">
        <view class="form-label">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/notice.png" />
            <text>活动公告</text>
          </view>
        </view>
        <view class="notice-input">
          <textarea v-model="formData.notice" placeholder="请输入活动公告" :maxlength="200" auto-height />
        </view>
      </view>

      <!-- 人数 -->
      <view class="form-item">
        <view class="form-label">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/people.png" />
            <text>人数上限</text>
          </view>
        </view>
        <view class="input-wrapper">
          <input type="number" v-model="formData.maxPeople" placeholder="请输入人数限制" class="people-input"
            @input="handleMaxPeopleInput" @blur="validateMaxPeople" />
        </view>
      </view>

      <!-- 分队 -->
      <view class="form-item" @tap="goToDivision">
        <view class="form-label with-arrow">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/team.png" />
            <text>分队</text>
          </view>
          <view class="division-status" v-if="formData.division">
            <text class="status-text">已开启</text>
            <text class="close-icon" @click.stop="closeDivision">×</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 收费方式 -->
      <view class="form-item" @tap="openFeeSelector">
        <view class="form-label with-arrow">
          <view class="icon-text-wrapper">
            <image class="icon" src="/static/icons/money.png" />
            <text>收费方式</text>
          </view>
          <text class="selected-fee" v-if="formData.feeType">{{ formData.feeTypeLabel }}</text>
          <text class="arrow">></text>
        </view>
      </view>

      <!-- 活动设置 -->
      <view class="switch-items">
        <view class="switch-item">
          <view class="text-wrapper">
            <text>是否允许待定</text>
          </view>
          <switch 
            :checked="!!formData.allowPending" 
            @change="e => formData.allowPending = e.detail.value ? 1 : 0" 
          />
        </view>
        <view class="switch-item">
          <view class="text-wrapper">
            <text>是否需要购买安全服务</text>
          </view>
          <switch 
            :checked="!!formData.needSecurity" 
            @change="e => formData.needSecurity = e.detail.value ? 1 : 0" 
          />
        </view>
        <view class="switch-item">
          <view class="text-wrapper">
            <text>报名需填写联系方式</text>
          </view>
          <switch 
            :checked="!!formData.needContact" 
            @change="e => formData.needContact = e.detail.value ? 1 : 0" 
          />
        </view>
        <view class="switch-item">
          <view class="text-wrapper">
            <text>私密活动</text>
          </view>
          <switch 
            :checked="!!formData.isPrivate" 
            @change="e => formData.isPrivate = e.detail.value ? 1 : 0" 
          />
        </view>
      </view>

      <!-- 活动标签 -->
      <view class="tags-section">
        <view class="tags-header">
          <text class="title">活动标签</text>
          <text class="sub-title">最多3个</text>
        </view>
        <view class="tags-list">
          <view class="tag" v-for="tag in tagsList" :key="tag.id" :class="{ 'selected': isTagSelected(tag) }"
            @tap="toggleTag(tag)">
            <text>{{ tag.name }}</text>
          </view>
          <view class="tag add-tag" @tap="showCustomTag">
            <text>+</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="bottom-actions">
      <!-- <view class="save-template">
        <checkbox :checked="formData.saveAsTemplate" @change="e => formData.saveAsTemplate = e.detail.value" />
        <text>保存为模板</text>
      </view> -->
      <button type="primary" class="update-button" @tap="handleSubmit">提交更新</button>
    </view>

    <!-- 组件引用 -->
    <team-selector :show.sync="showTeamSelector" :teams="myTeams" @select="onTeamSelected" />
    <date-time-selector :show.sync="showDateTimeSelector" @select="onDateTimeSelected" />
    <location-selector ref="locationSelector" @select="onLocationSelected" />
    <sport-type-selector :show.sync="showSportTypeSelector" v-model="formData.sportType" @select="onSportTypeSelected" />
    <fee-type-selector :show.sync="showFeeSelector" v-model="formData.feeType" @select="onFeeTypeSelected" />
    <tag-popup :show.sync="showCustomTagInput" @confirm="addCustomTag" />
  </view>
</template>

<script>
import TeamSelector from '@/components/TeamSelector.vue'
import DateTimeSelector from '@/components/DateTimeSelector.vue'
import LocationSelector from '@/components/LocationSelector.vue'
import SportTypeSelector from '@/components/SportTypeSelector.vue'
import FeeTypeSelector from '@/components/FeeTypeSelector.vue'
import TagPopup from '@/components/tag-popup/index.vue'
import { getActivity, updateActivity, uploadCover } from '@/api/youqiu/activity.js'
import { myCreateTeam } from '@/api/youqiu/team.js'

export default {
  name: 'ActivityEdit',
  components: {
    TeamSelector,
    DateTimeSelector,
    LocationSelector,
    SportTypeSelector,
    FeeTypeSelector,
    TagPopup
  },

  data() {
    return {
      activityId: '',
      showSportTypeSelector: false,
      selectedTags: [],
      formData: {
        title: '',
        ossId: 0,
        coverImage: '',
        team: null,
        datetime: null,
        location: null,
        sportType: null,
        notice: '',
        maxPeople: '',
        division: null,
        feeType: '',
        feeTypeLabel: '',
        needSecurity: 0,
        needContact: 0,
        allowPending: 0,
        isPrivate: 0,
        saveAsTemplate: false
      },
      showTeamSelector: false,
      showDateTimeSelector: false,
      showSportTypeSelector: false,
      showFeeSelector: false,
      showCustomTagInput: false,
      myTeams: [],
      tagsList: [
        { id: 1, name: '野生局' },
        { id: 2, name: '散客场' },
        { id: 3, name: '女足' },
        { id: 4, name: '真草' },
        { id: 5, name: '竞技性强' }
      ]
    }
  },

  onLoad(options) {
    if (options.id) {
      this.activityId = options.id
      this.getActivityDetails()
    }
    this.myCreateTeam()
  },

  methods: {
    // 获取活动详情并回填数据
    getActivityDetails() {
      getActivity(this.activityId).then(res => {
        if (res.code === 200) {
          const activity = res.data
          
          // 回填基本信息
          this.formData = {
            ...this.formData,
            title: activity.title,
            ossId: activity.ossId,
            coverImage: activity.coverImage,
            notice: activity.notice,
            maxPeople: activity.maxPeople,
            needSecurity: activity.needSecurity || 0,
            needContact: activity.needContact || 0,
            allowPending: activity.allowPending || 0,
            isPrivate: activity.isPrivate || 0
          }

          // 回填球队信息
          if (activity.homeTeam) {
            this.formData.team = {
              id: activity.homeTeam.id,
              name: activity.homeTeam.name
            }
          }

          // 回填时间信息
          const activityDate = new Date(activity.activityTime)
          this.formData.datetime = {
            label: this.formatDate(activityDate),
            time: this.formatTime(activityDate)
          }

          // 回填地点信息
          if (activity.location) {
            this.formData.location = {
              name: activity.location,
              latitude: activity.latitude,
              longitude: activity.longitude
            }
          }

          // 回填运动类型
          if (activity.sportType) {
            this.formData.sportType = {
              dictValue: String(activity.sportType),
              dictLabel: this.getSportTypeLabel(activity.sportType)
            }
          }

          // 回填收费类型
          if (activity.feeType) {
            this.formData.feeType = String(activity.feeType)
            this.formData.feeTypeLabel = this.getFeeTypeLabel(activity.feeType)
          }

          // 回填分队信息
          if (activity.division) {
            this.formData.division = {
              ...activity.division,
              enabled: true
            }
          }

          // 回填标签
          if (activity.tags) {
            const activityTags = activity.tags.split(',')
            
            // 将活动中的自定义标签添加到标签列表中
            activityTags.forEach(tagName => {
              // 检查标签是否已存在于标签列表中
              const exists = this.tagsList.some(tag => tag.name === tagName)
              if (!exists) {
                this.tagsList.push({
                  id: `custom_${Date.now()}_${tagName}`,
                  name: tagName
                })
              }
            })

            // 设置选中的标签
            this.selectedTags = activityTags.map(tag => ({
              id: `tag_${tag}`,
              name: tag
            }))
          }
        }
      })
    },

    // 获取我创建的球队
    myCreateTeam() {
      myCreateTeam().then(res => {
        this.myTeams = res.data
      })
    },

    // 格式化日期
    formatDate(date) {
      const today = new Date()
      const tomorrow = new Date(today)
      tomorrow.setDate(tomorrow.getDate() + 1)

      if (date.toDateString() === today.toDateString()) {
        return '今天'
      } else if (date.toDateString() === tomorrow.toDateString()) {
        return '明天'
      } else {
        return `${date.getMonth() + 1}月${date.getDate()}日`
      }
    },

    // 格式化时间
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },

    // 获取运动类型标签
    getSportTypeLabel(value) {
      // 这里需要实现获取运动类型标签的逻辑
      return value // 临时返回值
    },

    // 获取收费类型标签
    getFeeTypeLabel(value) {
      // 这里需要实现获取收费类型标签的逻辑
      return value // 临时返回��
    },

    // 添加标签相关方法
    isTagSelected(tag) {
      return this.selectedTags.some(t => t.id === tag.id || t.name === tag.name)
    },

    toggleTag(tag) {
      const index = this.selectedTags.findIndex(t => t.id === tag.id || t.name === tag.name)
      if (index > -1) {
        // 取消选中
        this.selectedTags.splice(index, 1)
      } else {
        // 选中，但要限制最多3个
        if (this.selectedTags.length >= 3) {
          uni.showToast({
            title: '最多只能选择3个标签',
            icon: 'none'
          })
          return
        }
        this.selectedTags.push(tag)
      }
    },

    showCustomTag() {
      this.showCustomTagInput = true
    },

    addCustomTag(content) {
      if (content) {
        // 检查标签长度
        if (content.length > 6) {
          uni.showToast({
            title: '标签最多6个字',
            icon: 'none'
          })
          return
        }

        // 创建新标签
        const newTag = {
          id: `custom_${Date.now()}`,
          name: content
        }

        // 检查是否已存在相同的标签
        if (!this.tagsList.some(tag => tag.name === content)) {
          // 添加到标签列表
          this.tagsList.push(newTag)
        }

        // 自动选中新添加的标签
        if (this.selectedTags.length < 3) {
          this.selectedTags.push(newTag)
        } else {
          uni.showToast({
            title: '最多选择3个标签',
            icon: 'none'
          })
        }
      }
    },

    // 添加其他必要的方法
    uploadCover() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          this.formData.coverImage = tempFilePath

          let data = {
            name: 'file',
            filePath: tempFilePath
          }

          uploadCover(data).then(response => {
            uni.showToast({
              title: "上传成功",
              icon: 'success'
            })
            this.formData.coverImage = response.data.url
            this.formData.ossId = response.data.ossId
          })
        },
        fail: (err) => {
          console.error('选择图片失败：', err)
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          })
        }
      })
    },

    validateForm() {
      if (!this.formData.title) {
        uni.showToast({
          title: '请输入活动标题',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.coverImage) {
        uni.showToast({
          title: '请上传封面图',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.team) {
        uni.showToast({
          title: '请选择球队',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.datetime) {
        uni.showToast({
          title: '请选择活动时间',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.location) {
        uni.showToast({
          title: '请选择活动地点',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.sportType) {
        uni.showToast({
          title: '请选择活动种类',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.notice) {
        uni.showToast({
          title: '请填写活动公告',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.maxPeople || parseInt(this.formData.maxPeople) <= 0) {
        uni.showToast({
          title: '请设置有效的人数上限',
          icon: 'none'
        })
        return false
      }

      if (!this.formData.feeType) {
        uni.showToast({
          title: '请选择收费方式',
          icon: 'none'
        })
        return false
      }

      return true
    },

    // 选择器相关方法
    openTeamSelector() {
      this.showTeamSelector = true
    },

    onTeamSelected(team) {
      this.formData.team = team
    },

    openDateTimeSelector() {
      this.showDateTimeSelector = true
    },

    onDateTimeSelected(datetime) {
      this.formData.datetime = datetime
    },

    openLocationSelector() {
      setTimeout(() => {
        this.$refs.locationSelector.open()
      }, 100)
    },

    onLocationSelected(location) {
      this.formData.location = location
    },

    openSportTypeSelector() {
      this.showSportTypeSelector = true
    },

    onSportTypeSelected(type) {
      this.formData.sportType = type
    },

    openFeeSelector() {
      this.showFeeSelector = true
    },

    onFeeTypeSelected(type) {
      if (type) {
        this.formData.feeType = type.dictValue
        this.formData.feeTypeLabel = type.dictLabel
      }
    },

    handleMaxPeopleInput(e) {
      let value = e.detail.value
      value = value.replace(/\D/g, '')
      value = value.replace(/^0+/, '')

      if (value) {
        let num = parseInt(value)
        if (num > 999) {
          value = '999'
        } else if (num <= 0) {
          value = '1'
        }
      }
      this.formData.maxPeople = value
    },

    validateMaxPeople() {
      if (!this.formData.maxPeople || parseInt(this.formData.maxPeople) <= 0) {
        this.formData.maxPeople = '1'
        uni.showToast({
          title: '人数必须大于0',
          icon: 'none'
        })
      }
    },

    goToDivision() {
      const currentSettings = this.formData.division || {
        teams: [{ name: '' }, { name: '' }],
        isRandomTeam: false,
        canChooseTeam: false,
        teamLimit: '不限',
        enabled: false
      }

      uni.navigateTo({
        url: '/pages/division/index',
        success: (res) => {
          res.eventChannel.emit('divisionSettings', currentSettings)
        }
      })
    },

    closeDivision() {
      this.formData.division = null
    },

    // 格式化日期时间
    formatDateTime(datetime) {
      if (!datetime) return ''
      
      // 获取当前日期
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      const tomorrow = new Date(today)
      tomorrow.setDate(tomorrow.getDate() + 1)
      
      // 如果没有时间部分，返回空字符串
      if (!datetime.time) return ''
      
      // 解析时间
      const [hours, minutes] = datetime.time.split(':')
      if (!hours || !minutes) return ''
      
      // 根据label确定具体日期
      let date
      switch (datetime.label) {
        case '今天':
          date = today
          break
        case '明天':
          date = tomorrow
          break
        default:
          // 如果是具体日期(格式如: "2024-03-21")
          date = new Date(datetime.label)
      }
      
      // 设置时间
      date.setHours(parseInt(hours))
      date.setMinutes(parseInt(minutes))
      
      // 返回标准格式 yyyy-MM-dd HH:mm:ss
      return this.formatDate(date)
    },
    
    // 日期格式化工具方法
    formatDate(date) {
      if (!(date instanceof Date) || isNaN(date)) return ''
      
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = '00'
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },

    // 处理提交
    async handleSubmit() {
      try {
        // 构造提交数据
        const submitData = {
          id: this.activityId,
          title: this.formData.title,
          ossId: this.formData.ossId,
          coverImage: this.formData.coverImage,
          teamId: this.formData.team?.id || '',
          activityTime: this.formatDateTime(this.formData.datetime),
          location: this.formData.location.name,
          latitude: this.formData.location.latitude,
          longitude: this.formData.location.longitude,
          sportType: this.formData.sportType.dictValue,
          notice: this.formData.notice,
          maxPeople: this.formData.maxPeople,
          feeType: this.formData.feeType,
          feeTypeLabel: this.getFeeTypeLabel(this.formData.feeType),
          needSecurity: Number(this.formData.needSecurity),
          needContact: Number(this.formData.needContact),
          allowPending: Number(this.formData.allowPending),
          isPrivate: Number(this.formData.isPrivate),
          tags: this.selectedTags.map(tag => tag.name).join(','),
          division: {
            enabled: this.formData.division.enabled ? 1 : 0,
            canChooseTeam: this.formData.division.canChooseTeam ? 1 : 0,
            teamLimit: this.formData.division.teamLimit,
            isRandomTeam: this.formData.division.isRandomTeam ? 1 : 0,
            teams: this.formData.division.teams
          }
        }

        const response = await updateActivity(submitData)
        
        if (response.code === 200) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      } catch (error) {
        console.error('更新失败:', error)
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      }
    },

    // 其他方法复用 publish 页面的实现...
  }
}
</script>

<style lang="scss" scoped>
.publish-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;

  .cover-upload {
    position: relative;
    height: 300rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .upload-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;

      .camera-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .upload-text-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
    }

    .cover-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .upload-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .camera-icon,
    .camera-icon-top {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 20rpx;
    }

    .upload-text {
      color: black;
      font-size: 28rpx;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }

  .form-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 120rpx;

    .form-item {
      padding: 30rpx 20rpx;
      border-bottom: 1rpx solid #eee;
      display: flex;
      align-items: center;

      .form-label {
        width: auto;
        min-width: 220rpx;
        display: flex;
        align-items: center;
        position: relative;

        .icon-text-wrapper {
          display: flex;
          align-items: center;
          width: 220rpx;
          flex-shrink: 0;
        }

        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
          flex-shrink: 0;
        }

        >text:first-of-type {
          font-size: 28rpx;
        }

        .sub-text,
        .selected-team,
        .selected-time,
        .selected-location,
        .selected-type,
        .selected-fee {
          flex: 1;
          text-align: right;
          padding-right: 40rpx;
          color: #666;
          font-size: 28rpx;
        }

        .arrow {
          position: absolute;
          right: 0;
          color: #999;
          font-size: 28rpx;
          padding-right: 20rpx;
        }

        .division-status {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-right: 40rpx;

          .status-text {
            color: #666;
            font-size: 28rpx;
          }

          .close-icon {
            margin-left: 10rpx;
            color: #999;
            font-size: 32rpx;
            padding: 0 10rpx;
          }
        }

        &.with-arrow {
          width: 100%;

          .selected-team,
          .selected-time,
          .selected-location,
          .selected-type,
          .selected-fee {
            flex: 1;
            text-align: right;
            padding-right: 40rpx;
            color: #666;
            font-size: 28rpx;
          }

          .arrow {
            position: absolute;
            right: 0;
            color: #999;
            font-size: 28rpx;
            padding-right: 20rpx;
          }
        }
      }

      textarea,
      input {
        flex: 1;
        margin-left: 20rpx;
        font-size: 28rpx;
      }

      &.notice-item {
        flex-direction: column;
        align-items: flex-start;

        .form-label {
          margin-bottom: 20rpx;

          .history {
            color: #666;
            font-size: 28rpx;
          }
        }

        .notice-input {
          width: 100%;

          textarea {
            width: 100%;
            min-height: 120rpx;
            font-size: 28rpx;
            line-height: 1.5;
          }
        }
      }

      .input-wrapper {
        flex: 1;
        display: flex;
        padding-right: 20rpx;

        .title-input {
          flex: 1;
          height: 80rpx;
          font-size: 28rpx;
          padding: 0 20rpx;
        }
      }

      .people-input {
        width: 200rpx;
        text-align: right;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .switch-items {
    .switch-item {
      padding: 30rpx 20rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #eee;
      position: relative;

      .text-wrapper {
        width: auto;
        flex-shrink: 0;
        white-space: nowrap;
        margin-right: 20rpx;
        margin-bottom: 30rpx;
      }

      >text:first-of-type {
        font-size: 28rpx;
      }

      switch {
        margin-left: auto;
        transform: scale(0.8);
        margin-bottom: 30rpx;
      }

      .tips {
        position: absolute;
        left: 20rpx;
        bottom: 20rpx;
        font-size: 24rpx;
        color: #999;
      }

      &:first-child {
        padding-bottom: 50rpx;
      }
    }

    .switch-item:last-child {
      border-bottom: none;
    }
  }

  .tags-section {
    padding: 20rpx 0;
    position: relative;

    .tags-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-weight: bold;
      }

      .sub-title {
        font-size: 24rpx;
        color: #999;
        margin-left: 20rpx;
      }
    }

    .tags-list {
      display: flex;
      flex-wrap: wrap;

      .tag {
        padding: 10rpx 30rpx;
        background: #f5f5f5;
        border-radius: 30rpx;
        margin: 10rpx;
        font-size: 28rpx;
        color: #333;

        &.selected {
          background: #ff6b6b;
          color: #fff;
        }

        &.add-tag {
          background: #fff;
          border: 1px solid #eee;
          padding: 10rpx 20rpx;
          min-width: 44rpx;
          text-align: center;
          cursor: pointer;

          &:active {
            background: #f5f5f5;
          }
        }
      }
    }
  }

  .bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: #fff !important;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

    .save-template {
      display: flex;
      align-items: center;
      padding: 10rpx 0;
    }

    .update-button {
      flex: 1;
      margin-left: 20rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #4CAF50 !important;
      color: #fff !important;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-weight: bold;
      border: none !important;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  }
}
</style> 